MAKING AN OVERLAY PACK
======================

An overlay pack is a .zip containing one folder with at least two files:

  my-overlay/
    index.html   the overlay itself (a web page with a transparent background)
    meta.json    its name, category, default settings and Customize fields
    ...          any images, fonts or other files it uses (relative paths)

Open "Starting Soon Screen.zip" in this folder for a complete example.


index.html
----------
At the end of <body>, load the app's toolkit, then draw from the settings:

  <script src="/sdk/icons.js"></script>
  <script src="/sdk/overlay.js"></script>
  <script>
    Overlay.fit(document.getElementById("stage"), 1080, 1920); // scale your design to the window
    Overlay.onSettings(function (s) { /* draw using s.title, s.colors.accent ... */ });
    Overlay.onTest(function () { /* play an animation when Test is pressed */ });
  </script>

Put data-bounds on the element the dashboard preview should zoom to.
Helpers: Overlay.markup(text) turns *word* into <em>word</em>,
Overlay.lines(text) splits lines, Overlay.icon("tiktok", colour) gives a
platform logo. A "background" setting (green/blue/black) is applied for you.


meta.json
---------
{
  "id": "my-overlay",                  lowercase letters, numbers and dashes
  "name": "My Overlay",
  "category": "Screens",               new categories appear in the sidebar
  "categoryDescription": "...",        optional, shown on the category banner
  "description": "...",
  "canvas": { "width": 1080, "height": 1920 },   Browser source size
  "testLabel": "Play animation",
  "defaults": { "title": "Hello", "colors": { "accent": "#7cff1f" } },
  "fields": [
    { "section": "Text", "open": true },
    { "key": "title", "type": "text", "label": "Title" },
    { "key": "colors.accent", "type": "color", "label": "Neon colour", "presets": true }
  ]
}

Field types: text, textarea, range (min, max, step, unit), toggle, color
(presets), select (options: [["value","Label"], ...]), font, background,
image (picks from Assets), socials (list of platform + username), note (text).
Add "half": true to put two fields side by side, and
"showIf": { "key": "...", "equals": "..." } to show a field only sometimes.
Use dots in keys ("colors.accent") for nested settings.

Adding a pack with the same id again replaces the old one and keeps its
saved settings.
